<template >
    <div>
      <div style="width: 70%;margin-bottom: 5px">
          <div style="display: flex;justify-content: space-between">
            <div>
              <el-input v-model="sect_name"
                        :disabled="showAdvanceSearchVisible"
                        @keydown.enter.native="initSects"
                        size="small"
                        style="width: 300px;margin-right: 10px"
                        prefix-icon="el-icon-search"
                        clearable
                        @clear="initSects"
                        placeholder="请输入员工名进行搜索。。。"></el-input>
              <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initSects">搜索</el-button>
            </div>
            <div>
              <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddSectView">添加门派</el-button>
            </div>
          </div>
      </div>
      <div>
        <el-table
            :data="sects"
            stripe
            border
            size="small"
            style="width: 70%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="seq_no"
              label="序号"
              width="55">
          </el-table-column>
          <el-table-column
              prop="name"
              label="宗门名称"
              width="150">
          </el-table-column>
          <el-table-column
              prop="suzerain_name"
              label="掌门姓名"
              width="150">
          </el-table-column>
          <el-table-column
              prop="zh_name"
              label="门派等级"
              width="150">
          </el-table-column>
          <el-table-column
              prop="region"
              label="门派所在区域"
              width="150">
          </el-table-column>
          <el-table-column
              prop="createdate"
              label="创建时间"
              width="150">
          </el-table-column>
          <el-table-column
              prop="enabled"
              label="是否启用"
              width="100">
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
              <el-tag type="danger" v-else>未启用</el-tag>
            </template>
          </el-table-column>
          <el-table-column min-width="120" :show-overflow-tooltip="true"
              prop="brief_introduction"
              label="简介"
              width="150">
          </el-table-column>
          <el-table-column
              width="180"
              label="操作">
            <template slot-scope="scope">
              <el-button size="small" type="primary" @click="showEditView(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: space-between;width: 70%" >
         <div>
           <el-button size="small" type="danger"
                      :disabled="this.multipleSelection.length===0"
                      @click="deleteMany"
           >批量删除</el-button>
         </div>
          <el-dialog
              :title="title"
              :visible.sync="dialogVisible"
              width="30%"
          >
            <table>
              <tr>
                <td>
                  <el-tag>宗门名称</el-tag>
                </td>
                <td>
                  <el-input v-model="sect.name" style="margin-left: 6px" size="small" placeholder="请输入宗门名称"></el-input>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>掌门姓名</el-tag>
                </td>
                <td>
                  <el-input v-model="sect.suzerain_name" style="margin-left: 6px" size="small" placeholder="请输入宗门名称"></el-input>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>门派等级</el-tag>
                </td>
                <td>
                  <el-select size="small" v-model="sect.sect_rank" placeholder="门派等级" style="margin-left: 8px;margin-right: 8px">
                    <el-option
                        v-for="item in sect_ranks"
                        :key="item.id"
                        :label="item.zh_name"
                        :value="item.code">
                    </el-option>
                  </el-select>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>是否启用</el-tag>
                </td>
                <td>
                  <el-switch
                      style="display: block"
                      v-model="sect.enabled"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="已启用"
                      inactive-text="未启用">
                  </el-switch>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>门派所在区域</el-tag>
                </td>
                <td>
                  <el-input v-model="sect.region" style="margin-left: 6px" size="small" placeholder="请输入门派所在区域"></el-input>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>简介</el-tag>
                </td>
                <td>
<!--                  <el-input v-model="sect.brief_introduction" style="margin-left: 6px" size="small" placeholder="请输入门派简介"></el-input>-->
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入门派简介"
                      v-model="sect.brief_introduction">
                  </el-input>
                </td>
              </tr>
              <tr>
                <td>
                  <el-tag>创建日期</el-tag>
                </td>
                <td>
                  <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="sect.createdate" style="width: 100%;"></el-date-picker>
                </td>
              </tr>
            </table>
            <span slot="footer" class="dialog-footer">
              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
              <el-button size="small" type="primary" @click="doAddorUpdate">确 定</el-button>
            </span>
          </el-dialog>
          <div>
            <el-pagination
                background
                @current-change="currentChange"
                @size-change="sizeChange"
                layout="sizes,prev, pager, next, jumper, ->, total"
                :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "SectMana",
  data(){
    return {
      title:"",
      sect_name:"",
      showAdvanceSearchVisible:false,
      dialogVisible:false,
      sects:[],
      sect:{
        id:'',
        name:'',
        suzerain_name:'',
        sect_rank:'',
        zh_name:'',
        region:'',
        brief_introduction:'',
        enabled:true,
        createdate:''
      },
      sect_ranks:[],
      multipleSelection:[],
      total:0,
      size:10,
      currentPage:1,
    }
  },
  methods:{
    //编辑门派
    showEditView(data){
      Object.assign(this.sect,data)
      this.dialogVisible = true;
      this.title = '编辑门派'
    },
    //删除
    deleteHandler(data){
      this.$confirm('此操作将永久删除['+data.name+']职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/system/basic/sect/"+data.id).then(resp=>{
          if(resp){
            this.initSects();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //批量删除
    deleteMany(){
      this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个宗门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = "?";
        this.multipleSelection.forEach(item=>{
          ids+= "ids=" + item.id + "&";
        });
        ids = ids.substring(0,ids.length-1);
        this.$deleteRequest("/system/basic/sect/"+ids).then(resp=>{
          if(resp){
            this.initSects();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //打开add弹窗
    showAddSectView(){
      this.sect = {
        id:'',
        name:'',
        suzerain_name:'',
        sect_rank:'',
        zh_name:'',
        region:'',
        enabled:true,
        createdate:''
      }
      this.dialogVisible = true
      this.title ='添加门派'
    },
    //添加or编辑
    doAddorUpdate(){
      if(this.sect.id===''){
        this.$postRequest("/system/basic/sect/",this.sect).then(resp=>{
          if(resp){
            this.dialogVisible = false;
            this.initSects();
            this.sect = {
              name:'',
              suzerain_name:'',
              sect_rank:'',
              region:'',
              enabled:true,
              createdate:''
            }
          }
        });
      }else {
        this.$putRequest("/system/basic/sect/",this.sect).then(resp=>{
          if(resp){
            this.dialogVisible = false;
            this.initSects();
            this.sect = {
              seq_no:'',
              name:'',
              suzerain_name:'',
              sect_rank:'',
              region:'',
              enabled:true,
              createdate:''
            }
          }
        })
      }

    },
    //每页条数事件
    sizeChange(size){
      this.size = size;
      this.initSects();
    },
    //当前页事件
    currentChange(currentPage){
      this.currentPage = currentPage;
      this.initSects();
    },
    //初始化宗门
    initSects(){
      this.$getRequest("/system/basic/sect/?type=sect_rank&name="+this.sect_name+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
        if(resp){
          //alert(JSON.stringify(resp))
          this.sects = resp.data;
          this.total = resp.total;
        }
      })
    },

    //初始化等级
    initSectRanks(){
      this.$getRequest("/system/constant/type?type=sect_rank").then(resp=>{
        if(resp){
          this.sect_ranks = resp;
        }
      })
    },
    //多选
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
  },
  mounted() {
    //初始化宗门查询列表
    this.initSects();
    this.initSectRanks();
  },
}

</script>

<style scoped>

</style>